<template>
	<view class="page_body">
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'"
				@click="navToBack"
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">待确认订单</text>
		</navBar>
		<!-- 搜索栏 -->
		<view style="background-color: #FFF;">
			<search 
				@searchBlur='searchBlur'
				@nativeInput="nativeInput"
				:isLinks='false'
				bgColor="#F5F5F5">
			</search>
		</view>
		
		<scroll-view
		@scrolltolower="scrolltolower"
		scroll-y
		:style="{'height': 'calc(100vh - ' + demoTopHieght +')'}"
		class="main_tbcOrder pd10">
			
			<view
			v-for="(item,index) in orderList"
			:key="index"
			@click="toDetails(item)"
			class="mian_allOrder_list_item mb10">
				<view class="list_item_top pd_lr10">
					<view class="list_item_top_left">
						下单时间：{{Utils.DateFormateArr(item.createTime)}} 
					</view>
					
					<view 
					class="list_item_top_right">
						待确认
					</view>
					
				</view>
				<!-- 商品信息 -->
				<view 
				v-for="(it,inx) in item.commodityInfo"
				:key="inx"
				class="list_item_conter pd10">
					<view class="list_item_conter_top">
						<view class="list_item_conter_top_img" v-if="updateNoneImg">
							<image :src=" it.spuInfo && it.spuInfo.picture ? uploadImgUrl + it.spuInfo.picture : computedMorentu"></image>
						</view>
						<view class="list_item_conter_top_text ml5">
							<view class="list_item_conter_top_text_top texttowShow">
								{{it.spuInfo && it.spuInfo.name ? it.spuInfo.name : ''}}
							</view>
							<template v-if="item.type == 1">
								<view
								v-for="(itCd,inxCd) in it.children"
								:key="inxCd"
								class="list_item_conter_top_text_bom ">
									<view class="list_item_conter_top_text_bom_item mt10">
										<text class="list_item_conter_top_text_bom_item_l">
										{{
											itCd.skuInfo &&
											itCd.skuInfo.unitInfo && 
											itCd.skuInfo.unitInfo.name &&
											itCd.skuInfo.specsOptionInfo && 
											itCd.skuInfo.specsOptionInfo.length ? 
											itCd.skuInfo.specsOptionInfo.map(it=>it.optionName).join(' ') +
											'/' +
											itCd.skuInfo.unitInfo.name :
											itCd.skuInfo.unitInfo.name
											
										}}
										</text>
										<text class="list_item_conter_top_text_bom_item_r">
										￥{{itCd.price ? Utils.formatToFixed(itCd.price,'price') : 0}} X{{itCd.qty ? itCd.qty : 0}}	
										</text>
									</view>
								</view>
							</template>
							<template v-if="item.type == 2">
								<view
								class="list_item_conter_top_text_bom ">
									<view class="list_item_conter_top_text_bom_item mt10">
										<text class="list_item_conter_top_text_bom_item_l">
										{{
											it.skuInfo &&
											it.skuInfo.unitInfo && 
											it.skuInfo.unitInfo.name &&
											it.skuInfo.specsOptionInfo && 
											it.skuInfo.specsOptionInfo.length ? 
											it.skuInfo.specsOptionInfo.map(it=>it.optionName).join(' ') +
											'/' +
											it.skuInfo.unitInfo.name :
											it.skuInfo.unitInfo.name
											
										}}
										</text>
										<text class="list_item_conter_top_text_bom_item_r">
										￥{{it.price ? Utils.formatToFixed(it.price,'price') : 0}} X{{it.qty ? it.qty : 0}}	
										</text>
									</view>
									<!-- 满减 -->
									<view v-if="item.type == 2 && item.activityType == 2" class="biaoqian mt10">优惠:{{item.preferential ? Utils.formatToFixed(item.preferential,'money') : 0}}元</view>
								</view>
							</template>
						</view>
					</view>
					<!-- 活动赠品信息 //订单类型[1：普通订单 2：促销订单] -->
					<template v-if="item.type == 2 && item.activityType == 1 && it.children &&  it.children.length">
						<view 
						v-for="(itc,inxc) in it.children"
						class="list_item_conter_bom mt10">
							<view class="list_item_conter_top_img" v-if="updateNoneImg">
								<image class="zenpin" :src="xcxImgUrl && xcxImgUrl+'page_public/static/zengpin.svg'"></image>
								<image :src=" itc.spuInfo && itc.spuInfo.picture ? uploadImgUrl + itc.spuInfo.picture : computedMorentu"></image>
							</view>
							<view class="list_item_conter_top_text ml5">
								<view class="list_item_conter_top_text_top texttowShow">
									{{itc.spuInfo && itc.spuInfo.name ? itc.spuInfo.name : 0}}
								</view>
								<view class="list_item_conter_top_text_bom ">
									<view class="list_item_conter_top_text_bom_item mt10">
										<text class="list_item_conter_top_text_bom_item_l">
											{{
												itc.skuInfo &&
												itc.skuInfo.unitInfo && 
												itc.skuInfo.unitInfo.name &&
												itc.skuInfo.specsOptionInfo && 
												itc.skuInfo.specsOptionInfo.length ? 
												itc.skuInfo.specsOptionInfo.map(it=>it.optionName).join(' ') +
												'/' +
												itc.skuInfo.unitInfo.name :
												itc.skuInfo.unitInfo.name
												
											}}
										</text>
										<text class="list_item_conter_top_text_bom_item_r"> X{{itc.qty ? itc.qty : 0}}</text>
									</view>
								</view>
							</view>
						</view>
					</template>
				</view>
				<view class="list_item_bom pd_lr10">
					<view class="">
						共{{item.qty ? item.qty : 0}}件商品
					</view>
					<view v-if="item.type == 2 && item.activityType == 2" class="">
						合计：￥{{item.money ? Utils.formatToFixed(item.money-item.preferential,'money') : 0}}
					</view>
					<view v-else class="">
						合计：￥{{item.money ? Utils.formatToFixed(item.money,'money') : 0}}
					</view>
				</view>
				<view class="list_item_btn pd10">
					<view 
					@click.stop="closeOrder(item)"
					class="list_item_btn_item ml5">
						关闭订单
					</view>
					
					<view 
					@click.stop="sureOrder(item)"
					class="list_item_btn_item list_item_btn_item_active ml5">
						确认订单
					</view>
					
				</view>
			</view>
			
		</scroll-view>
		
		<!-- 模态框确认 -->
		<u-modal 
		:show="modalShow" 
		:title="modalInfo.title" 
		showConfirmButton
		showCancelButton
		@confirm='modalConfirm'
		@cancel='modalShow = false'
		:content='modalInfo.content'>
		
		</u-modal>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import {listMallOrderPageInfo,updateMallOrderStatus} from '@/api/global.js'
	import { uploadImgUrl } from '@/utils/request.js'
	export default {
		computed:{
			...mapGetters(['demoTopHieght']),
			//返回默认图
			computedMorentu(){
				return this.$store.state.morentu
			},
			//返回有图无图控制
						updateNoneImg() {
							return this.$store.state.configSetting.noneImge == 1 ? false : true
						},
		},
		data() {
			return {
				timer:null,
				uploadImgUrl,
				pageData:{
					currentPage:1,
					pageSize:10
				},
				lastPage:0,
				orderList:[],
				searchParams:{
					apiSearch:'',
					status:2,//状态[1：待审核 2：修改待确认 3：待发货 4：待收货确认 5：已完成 6：已作废 7：关闭]
					sort:2,
				},
				modalShow:false,//模态框
				modalInfo:{ //模态框提示对象内容
					title:'温馨提示',
					content:''
				},
				modalType:0,//区分模态确认后点击事件
				orderId:'',//订单id
			};
		},
		onLoad() {
			this.getList()
		},
		onShow() {
			this.$nextTick(() => {
				//获取高度
				this.Utils.getDemoTopHeight('main_tbcOrder')
			})
		},
		methods:{
			//去订单详情
			toDetails(item){
				//保存商品信息
				this.$store.commit('updateCommonityItem',item)
				uni.navigateTo({
					url:`/page_public/orderDetails?routeType=tbcOrder`
				})
			},
			//关闭订单
			closeOrder(item){
				this.modalShow = true
				this.modalInfo.content = '是否关闭当前订单？？？'
				this.orderId = item?.orderId || ''
				this.modalType = 1//关闭订单操作
				
			},
			//确认订单
			sureOrder(item){
				this.modalShow = true
				this.modalInfo.content = '是否确认当前订单已修改的信息准确无误？？？'
				this.orderId = item?.orderId || ''
				this.modalType = 2//确认订单操作
			},
			//模态确定
			async modalConfirm(){
				if(this.modalType == 1){ //关闭订单操作
					// 标记[1.订单确认  2.确认收货  3.审核通过  4.作废  5.订单修改  6.关闭]
					let res = await updateMallOrderStatus({
						tag:6,
						orderId:this.orderId
					})
					if(res.code == 2000){
						this.Utils.toast(`关闭成功`)
						this.modalShow = false
						this.pageData.currentPage = 1
						this.orderList = []
						this.getList()
					}else{
						this.Utils.toast(`${res.msg}`)
					}
				}
				if(this.modalType == 2){//确认订单操作
					//标记[1.订单确认  2.确认收货  3.审核通过  4.作废  5.订单修改  6.关闭]
					let res = await updateMallOrderStatus({
						tag:1,
						orderId:this.orderId
					})
					if(res.code == 2000){
						this.Utils.toast(`确认成功`)
						this.modalShow = false
						this.pageData.currentPage = 1
						this.orderList = []
						this.getList()
					}else{
						this.Utils.toast(`${res.msg}`)
					}
				}
				if(this.modalType == 3){//删除订单操作
					let res = await deleteMallOrderByOrderId({
						orderId:this.orderId
					})
					if(res.code == 2000){
						this.Utils.toast(`删除成功`)
						this.modalShow = false
						this.pageData.currentPage = 1
						this.orderList = []
						this.getList()
					}else{
						this.Utils.toast(`${res.msg}`)
					}
				}
			},
			//下拉加载
			scrolltolower(){
				this.pageData.currentPage++
				if(this.pageData.currentPage > this.lastPage){
					return
				}else{
					this.getList()
				}
			},
			//输入框点击搜素
			searchBlur(val){
				console.log(val);
				this.searchParams.apiSearch = val
				this.pageData.currentPage = 1
				this.orderList = []
				this.getList()
			},
			nativeInput(e){
				this.searchParams.apiSearch = e;
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.getList();
				},1000)
			},
			//返回上一级
			navToBack(){
				uni.switchTab({
					url:'/pages/myde/myde'
				})
			},
			//获取列表
			async getList(){
				uni.showLoading()
				let res  = await listMallOrderPageInfo({
					...this.searchParams,
					...this.pageData
				})
				if(res.code == 2000){
					uni.hideLoading()
					if(this.pageData.currentPage == 1){
						this.orderList = res?.data?.info?.list || []
					}else{
						this.orderList = this.orderList.concat(res?.data?.info?.list || [])
					}
					this.lastPage = res?.data?.info?.lastPage
				
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-modal__button-group__wrapper--confirm.u-modal__button-group__wrapper--confirm  {
		background-color: #ec4141;
		
		.u-modal__button-group__wrapper__text {
			color: #FFF !important;
		}
	}
	.main_tbcOrder{
		width: 100%;
		box-sizing: border-box;
		
		.mian_allOrder_list_item{
			background-color: #FFF;
			width: 100%;
			border-radius: $border_radius_10;
			
			.list_item_top{
				height: 88rpx;
				border-bottom: 1px solid #f3f3f3;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $text_color_333;
					.list_item_top_left{
						font-size: $font_size_12;
					}
					.list_item_top_right{
						font-size: $font_size_14;
					}
			}
			.list_item_conter{
				border-bottom: 1px solid #f3f3f3;
				.list_item_conter_top,
				.list_item_conter_bom{
					display: flex;
					.list_item_conter_top_img{
						position: relative;
						border-radius: $border_radius_4;
						width: 160rpx;
						height: 160rpx;
						.zenpin{
							position: absolute;
							left: 0;
							top: 0;
							z-index: 999;
							width: 80rpx;
							height: 32rpx;
						}
						image{
							width: 100%;
							height: 100%;
						}
					}
					
					.list_item_conter_top_text{
						flex: 1;
						.list_item_conter_top_text_top{
							font-size: $font_size_12;
							color: $text_color_333;
						}
						.list_item_conter_top_text_bom{
							.list_item_conter_top_text_bom_item{
								font-size: $font_size_12;
								display: flex;
								justify-content: space-between;
								.list_item_conter_top_text_bom_item_l{
									color: $text_color_808080;
									 width: 150px;
								}
								.list_item_conter_top_text_bom_item_r{
									color: $text_color_333;
								}
							}
							.biaoqian{
								font-size: $font_size_12;
								color: $text_color_ec4141;
								padding: 4rpx;
								background-color: rgba(255, 227, 227, 1);
								width: 150rpx;
								max-width: 300rpx;
								border-radius: $border_radius_4;
								text-align: center;
								float: right;
							}
						}
					}
				}
				.list_item_conter_bom{
					margin-left: 100rpx;
				}
			}
			
			.list_item_bom{
				display: flex;
				height: 80rpx;
				align-items: center;
				justify-content: space-between;
				color: $text_color_333;
				font-size: $font_size_12;
			}
			.list_item_btn{
				display: flex;
				justify-content: flex-end;
		
				.list_item_btn_item{
					font-size: $font_size_14;
					color: $text_color_333;
					border: 1px solid rgba(230, 230, 230, 1);
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: $border_radius_4;
					
				}
				.list_item_btn_item_active{
					color: $text_color_ec4141;
					border: 1px solid $text_color_ec4141;
				}
			}
		}
	}

</style>
